import 'package:flutter/material.dart';
import 'package:flutter_eve_plugin/constants/constant.dart';
import 'package:flutter_eve_plugin/constants/font_family.dart';
import 'package:flutter_eve_plugin/constants/font_weight.dart';
import 'package:flutter_eve_plugin/plugin/main.dart';
import 'package:flutter_eve_plugin/route/main.dart';
import 'package:flutter_eve_plugin/store/main.dart';
import 'package:flutter_eve_plugin/store_vm/app_vm.dart';
import 'package:flutter_eve_plugin/store_vm/ye_xiu/checkpoint/main.dart';
import 'package:flutter_eve_plugin/store_vm/ye_xiu/main.dart';
import 'package:flutter_eve_plugin/utils/image_util.dart';
import 'package:flutter_eve_plugin/utils/screen_util.dart';
import 'package:flutter_redux/flutter_redux.dart';

class CheckpointRankHeaderWidget extends StatelessWidget {
  const CheckpointRankHeaderWidget({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return StoreConnector<AppState, AppStateViewModel>(converter: (store) {
      return AppStateViewModel(
          state: store.state,
          yeXiuStateViewModel: YeXiuStateViewModel(checkpointStateViewModel:
              CheckpointStateViewModel(buyVipFunc: () {
            PluginEve.sendMessage(PluginConstant.actionAppBuyVip);
          })));
    }, builder: (context, vm) {
      var stages = vm.state.yeXiuState.checkpointState.checkpointStages;
      return Container(
        padding: EdgeInsets.only(
            left: setRatio(16), right: setRatio(16), top: setRatio(20)),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Text(
                  stages?.dungeonName ?? '',
                  style: TextStyle(
                      letterSpacing: setRatio(2),
                      fontStyle: FontStyle.italic,
                      fontFamily: FontFamily.PMZD,
                      fontSize: setTextSp(23),
                      color: Color(0xFFFFFFFF)),
                ),
                SizedBox(
                  width: setRatio(7),
                ),
                GestureDetector(
                  onTap: () {
                    Navigator.pushNamed(
                        context, RouteConstant.CheckpointPassRankPage);
                  },
                  child: Container(
                    width: setRatio(68),
                    height: setRatio(18),
                    decoration: ShapeDecoration(
                        shadows: [
                          BoxShadow(
                              color: Color(0x42000000),
                              offset: Offset(0, setRatio(2)),
                              blurRadius: setRatio(2))
                        ],
                        shape: StadiumBorder(),
                        gradient: LinearGradient(
                            colors: [Color(0xFFFFA438), Color(0xFFFFC383)],
                            begin: Alignment.topCenter,
                            end: Alignment.bottomCenter)),
                    child: Center(
                      child: Text(
                        '副本排名>',
                        style: TextStyle(
                            letterSpacing: setRatio(1),
                            fontStyle: FontStyle.italic,
                            fontFamily: FontFamily.PINGFANG,
                            fontWeight: FontWeightCustom.PF_Bold,
                            fontSize: setRatio(11),
                            color: Color(0xFFFFFFFF)),
                      ),
                    ),
                  ),
                )
              ],
            ),
            SizedBox(
              height: setRatio(14),
            ),
            Text(
              stages?.desc ?? '',
              style: TextStyle(
                  fontFamily: FontFamily.PINGFANG,
                  fontWeight: FontWeightCustom.PF_Medium,
                  color: Color(0xFFFFFFFF)),
            ),
            SizedBox(
              height: setRatio(20),
            ),
            (stages?.isVIP ?? 0) > 0
                ? Container()
                : Container(
                    width: setRatio(280),
                    height: setRatio(26),
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(setRatio(5)),
                        gradient: LinearGradient(
                            colors: [Color(0x60000000), Color(0x40000000)],
                            begin: Alignment.topCenter,
                            end: Alignment.bottomCenter)),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: <Widget>[
                        SizedBox(
                          width: setRatio(6),
                        ),
                        Image.asset(
                          imageUtilYeXiu('checkpoint/icon_checkpoint_vip@3x'),
                          width: setRatio(35),
                          height: setRatio(25),
                        ),
                        SizedBox(
                          width: setRatio(4),
                        ),
                        Text(
                          'VIP用户增加每日次数${stages?.vipExtra ?? 0}次',
                          style: TextStyle(
                              fontFamily: FontFamily.PINGFANG,
                              fontWeight: FontWeightCustom.PF_Medium,
                              fontSize: setTextSp(13),
                              color: Color(0xFFFFE4A2)),
                        ),
                        SizedBox(
                          width: setRatio(15),
                        ),
                        GestureDetector(
                          onTap: vm.yeXiuStateViewModel.checkpointStateViewModel
                              .buyVipFunc,
                          child: Text(
                            '前往开通',
                            style: TextStyle(
                                decoration: TextDecoration.underline,
                                decorationStyle: TextDecorationStyle.solid,
                                fontFamily: FontFamily.PINGFANG,
                                fontWeight: FontWeightCustom.PF_Medium,
                                fontSize: setTextSp(13),
                                color: Color(0xFFFFFFFF)),
                          ),
                        )
                      ],
                    ),
                  )
          ],
        ),
      );
    });
  }
}
